<template>
  <el-row>
    <el-button type="primary" plain @click="open('add')">增加设备</el-button>
  </el-row>
  <el-row>
    <el-col v-for="item in devices" :key="item" :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span></span>
            <el-button class="button" text @click="deleteDev(item)">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </template>
        <div id="devItem">
          <p>deviceName :{{ item.deviceName }}</p>
          <p>deviceNick :{{ item.deviceNick }}</p>
          <p>deviceStatus :{{ item.deviceStatus }}</p>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";
import { useRouter } from "vue-router";
import Qs from "qs";
import router from "@/router";

export default {
  name: "devManage",
  data() {
    return {
      devices: {},
    };
  },
  mounted() {
    this.devInit();
  },
  setup() {
    const router = useRouter();
    //组合式api不能使用this
    let open = (name) => {
      router.push({ name });
    };

    return { open };
  },
  methods: {
    devInit() {
      let self = this;
      axios({
        method: "post",
        url: "https://3098l4z890.picp.vip/querydevice",
        responseType: "json",
      })
        .then(function (info) {
          if (info.data.success) {
            console.log("axios成功");
            self.devices = info.data.data;
            // console.log(info.data.data);
          } else {
            console.log("axios失败");
            return false;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    deleteDev(obj) {
      console.log(obj.deviceName);
      // let self = this;
      axios({
        method: "post",
        url: "https://3098l4z890.picp.vip/deletedevice",
        data: Qs.stringify({
          //需要通过Qs的stringify转成formdata的形式
          deviceName: obj.deviceName,
        }),
        responseType: "json",
      })
        .then(function (info) {
          if (info.data.success) {
            console.log("删除成功");
            router.push("/message");
          } else {
            console.log("删除失败");
            return false;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 400px;
  margin-bottom: 15px;
  margin-top: 15px;
}
#icon {
  height: 50px;
}
</style>
